<template>
	<view class="typeBox">
		<view class="back" :style="{paddingTop: top}">
			<view class="sousou">
				<u-search placeholder="搜索" disabled @click="goSearch" bgColor="#f2f2f2" borderColor="#f2f2f2" :showAction="false"></u-search>
			</view>
		</view>
		
		<view class="tyInfo" :style="{top: top}">
			<view class="lmList">
				<block v-for="(item,index) in typeList" :key="index">
					<view class="lmli" @click="goGoodsPage(item)">
						<image :src="imgUrl + item.bm_url" mode=""></image>
						<text>{{language == 'zh_CN'? item.bm_name:item.bm_ename}}</text>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import { getTypeList } from '@/api/login.js';
	import baseUrl from '@/utils/config.js';
	export default {
		data() {
			return {
				top: 0,
				zhuTop: 0,
				language: '',
				imgUrl: baseUrl,
				typeList: []
			}
		},
		created() {
			//让自定义导航栏头部组件始终和胶囊对齐 做到兼容各手机型号
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.top = menuButtonInfo.top + 'px';
			this.zhuTop = menuButtonInfo.top  + 'px';
		},
		onShow() {
			this.language = this.$i18n.locale;
			this.getTypeInfo();
		},
		methods: {
			getTypeInfo() {
				getTypeList().then(res=>{
					this.typeList = res.rows;
				});
			},
			goGoodsPage(val) {
				uni.navigateTo({
					url:`/pages/goods/goods?bm_id=${val.bm_id}`
				})
			},
			goSearch() {
				uni.navigateTo({
					url:'/pages/search/search'
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.typeBox{
	background-color: #f2f2f2;min-height: 100vh;overflow: auto;
	.tyInfo{
		position: absolute;left:0;width:100%;margin-top: 80rpx; 
		.lmList{
			padding:40rpx 25rpx;@include flx;justify-content: space-between;flex-wrap: wrap;
			.lmli{
				margin-bottom: 20rpx;margin-right:15rpx;
				image{
					width: 150rpx;height: 150rpx;display: block;
				}
				text{
					@include baseFont(28rpx,#333,40rpx);display: block;text-align: center;margin-top:15rpx;
				}
			}
		}
		.lmList:after {
			content: "";
			flex: 1;
		}

	}
	.back{
		color: #000;z-index: 99999;position: fixed;top: 0;
		left: 0;font-weight: bold;display: flex;flex-direction: row;align-items: center;
		line-height: 50rpx;background-color: #fff;padding-left: 25rpx;
		font-size: 34rpx;width: 100%;padding-bottom: 20rpx;
		.sousou{
			width: 440rpx;margin-left: 10rpx;
		}
	}
}
</style>
